<template >
  <Form>
    <FormItem>
      <Select ref="lSelect" v-model="users" placeholder="请输入用户名" :loading="loading" multiple filterable remote :remote-method="remoteLeaderMethod" clearable>
        <Option v-for="(item, index) in  lItems" :label="item.name" :value="item.id" :key="index">{{ item.name }}
        </Option>
      </Select>
      <!--<Select ref="lSelect" v-model="users" remote multiple filterable :remote-method="remoteLeaderMethod" placeholder="请输入用户名" :loading="loading">-->
        <!--<Option v-for="(item, index) in  lItems" :value="item.id" :key="index">-->
          <!--<span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>-->
          <!--<span style="float: left">{{ item.username }}</span>-->
        <!--</Option>-->
      <!--</Select>-->
    </FormItem>
    <FormItem>
      <Button type="primary" @click="onSubmit">确认</Button>
    </FormItem>
  </Form>
</template>
<script>
import {
  page
} from '@/api/admin/user/index'
import {
  getUsers,
  modifyUsers
} from '@/api/admin/role/index'
import { mapGetters } from 'vuex'
export default {
  props: {
    groupId: {
      default: '1'
    }
  },
  data () {
    return {
      lItems: [],
      mItems: [],
      users: [],
      leaders: [],
      members: [],
      list: [],
      loading: false,
      groupManager_btn_userManager: false
    }
  },
  created () {
    this.initUsers()
    this.groupManager_btn_userManager = this.elements['groupManager:btn_userManager']
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    remoteMemberMethod (query) {
      if (query !== '') {
        this.loading = true
        this.loading = false
        page({
          name: query
        }).then(response => {
          this.mItems = response.data.rows
          this.total = response.data.total
          this.loading = false
        })
      } else {
        this.mItems = []
      }
    },
    remoteLeaderMethod (query) {
      if (query !== '') {
        this.loading = true
        this.loading = false
        page({
          name: query
        }).then(response => {
          this.lItems = response.data.rows
          this.total = response.data.total
          this.loading = false
        })
      } else {
        this.lItems = []
      }
    },
    onSubmit () {
      const vals = {}
      if (this.users.length > 0) vals.users = this.users.join()
      modifyUsers(this.groupId, vals).then(() => {
        this.$emit('closeUserDialog')
        this.$Notice.success({
          title: '成功',
          message: '保存成功'
        })
      })
    },
    initUsers () {
      // this.$refs.mSelect.preventRemoteCall = false
      // this.$refs.lSelect.preventRemoteCall = false
      getUsers(this.groupId).then(response => {
        this.lItems = response.data
        const mems = []
        const leas = []
        for (let i = 0; i < response.data.length; i++) {
          mems.push(response.data[i].id)
        }
        this.users = mems
        console.log('用户－－－－－' + this.users)
        this.leaders = leas
        // console.log(this.leaders)
        // console.log(this.lItems)
        // this.$refs.mSelect.preventRemoteCall = true
        // this.$refs.lSelect.preventRemoteCall = true
      })
    }
  }
}
</script>
